<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
        }
        .main{
            width: 820px;
            height: 520px;
            border: 2px solid blue ;
            margin-left: 10%;
          
        }
        input {
            border: radius 5px;
        }

       

        .right {
            text-align: right;

        }

        table tr td input,
        select,
        textarea {
            margin-left: 40px;
        }

        #submit {
            margin-left: 10%;
            padding: 3px 10px;
            width: 60px;

            background-color: yellow;
        }

        #reset,
        #cancel {
            background-color:rgb(76, 172, 210);
            padding: 3px 5px;
            width: 60px;
        }

        .box {
            height: 500px;
            width: 800px;
            border: 5px solid #666666;
            padding-left: 10px;
            margin-left:5px;
            margin-top: 5px;
           background-color: white;

        }

        span {
            font-size: 10px;
            text-align: right;
        }

        #login {
            font-size: 12px;
            text-align: right;
            margin-top: 40px;
            
        }
        #login a{
            color: rgb(236, 140, 14);
        }

        .form {
            float: right;
            margin-right: 20px;
            margin-top: 7px;
        }
        .box2 {
            margin-top:7px ;
            float: left; }

        #reg {
            font-size: 20px;
            color: rgb(160, 160, 4);
        }

        #useR {
            font-size: 20px;
            color: gray;
        }
        img{
            width: 25px;
            height: 20px;
            vertical-align: middle;
        }
        .but{
            margin-top: 10px;
        }
        .length{
            width: 220px;
            height: 25px;
        }
      .short{
        width: 70px;
        height: 25px;
      }
     
      
    </style>
</head>

<body>
    <div class="main">
    <div class="box">
        <div class="box2">
            <span id="reg">新用户注册</span> <br>
            <span id="useR">USER REGISTER</span>
        </div>
        <form action="#" method="post" name="登录注册页面" class="form">
            <table>
                <tr>
                    <td class="right">用户名</td>
                    <td><input type="text" name="usename"  class="length" maxlength="5" placeholder="请输入用户名" required autofocus></td>
                </tr>
                <tr>
                    <td class="right">密码</td>
                    <td><input type="password" name="password "  class="length"  class="length" placeholder="请输入密码" required></td>
                </tr>
                <tr>
                    <td class="right"> 确认密码</td>
                    <td><input type="password" name="password"  class="length" placeholder="请输入确认密码" required></td>
                </tr>
                <tr>
                    <td class="right">性别</td>
                    <td>
                        <input type="radio" name="sex" value="man" id="man">
                        <label for="man"> <img src="man.png"> 男 </label>
                        <input type="radio" name="sex" value="woman" id="woman" checked>
                        <label for="woman"><img src="women.png">女</label>
                    </td>
                </tr>
                <tr>
                    <td class="right">爱好 </td>
                    <td><input type="checkbox" name="hobdy" value="0">吃
                        <input type="checkbox" name="hobdy" value="1">喝
                        <input type="checkbox" name="hobdy" value="2" checked>玩
                        <input type="checkbox" name="hobdy" value="3">乐
                    </td>
                </tr>
                <tr>
                    <td class="right">所在学院</td>
                    <td>
                        <select class="length">
                            <option value="0">--请选择--</option>
                            <option value="1">机电工程学院</option>
                            <option value="2">材料科学与工程学院</option>

                            <option value="3" selected>计算机科学与工程学院</option>
                            <option value="4">化学与工程学院</option>
                            <option value="5">数学与统计学院</option>
                            <option value="6">马克思主义学院</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="right"  > 联系电话</td>
                    <td><input type="tel" class="length" name="tel"></td>
                </tr>
                <tr><td class="right"   >邮箱</td>
                            <td><input type="email" class="length" name="" id=""></td>

                </tr>

                <tr>
                    <td class="right">入学时间:</td>
                    <td><input type="month" name="time"  class="length" id="" ></td>
                 
                </tr>

                <tr>
                    <td class="right">
                        <p>自我介绍</p>
                    </td>
                    <td><textarea name="自我介绍" cols="60" rows="5">大家好,我是来自计算机科学与工程学院计算机科学与技术的王其,喜欢文字,钟爱写作,爱好艺术,信奉"读万卷书,行万里路"的格言,优良的家庭氛围培养了我爱好读书的习性,而天生喜欢自由的我,经常利用假期到处走走,开阔自己的眼界,拓宽自己的视野,用自己的心去感悟生活,与历史对话.
                    </textarea>
                    </td>
                </tr>
                <tr>
                    <td class="right" >验证码</td>
                    <td><input type="text" class="short"> <img src="code.png"></td>
                </tr>
            </table>
            <div class="but">
            <input type="submit" name="register" value="注册" id="submit">
            <input type="reset" name="reset" value="重填" id="reset">
            <input type="button" name="cancel" value="取消" id="cancel">
        </div>
            <div id="login">已有账号?<a href="#">立即登录</a></div>

        </form>


    </div>
    </div>
</body>

</html>